import {
  Button,
  Col,
  Form,
  Input,
  message,
  Modal,
  Popconfirm,
  Radio,
  Row,
  Select,
  Table,
  Tabs,
} from 'antd';
import { FormComponentProps } from 'antd/es/form';
import React from 'react';
import SingleDragger from '../../../../../components/Commons/SingleDragger'

const R = require('ramda');

const FormItem = Form.Item;

interface CreateFormProps extends FormComponentProps {
  modalVisible: boolean;
  handleAdd: (fieldsValue: { desc: string }) => void;
  handleModalVisible: () => void;
}
const CreateForm: React.FC<CreateFormProps> = props => {

  const { modalVisible, form, handleAdd, handleModalVisible } = props;

  const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      form.resetFields();
      // handleAdd(fieldsValue);
    });
  };
  const formItemLayout = { labelCol: { sm: { span: 8 } }, wrapperCol: { sm: { span: 14 } } };

  const parentMethods = {
    res: "unapprovalfile",
    url: "",
    dataSource:{},
    module: "qianzhuang"
  };

  return (
    <Modal
      destroyOnClose
      title="立即申请"
      visible={modalVisible}
      onOk={okHandle}
      width={800}
      onCancel={() => handleModalVisible()}
    >
      <Form>
        <Row>
          <Col span={12}>
            <FormItem {...formItemLayout} label="开证银行名称" hasFeedback>
              {form.getFieldDecorator('bankname', {
                rules: [{ required: true, message: '请输入开证银行名称！' }],
                initialValue: '',
              })(<Input maxLength="50" />)}
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem {...formItemLayout} label="SWIFT代码" hasFeedback>
              {form.getFieldDecorator('swiftcode', {
                rules: [
                  {
                    required: true,
                    message: '请输入SWIFT代码！',
                  },
                ],
                initialValue: '',
              })(<Input maxLength="100" />)}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <FormItem {...formItemLayout} label="联系人手机号" hasFeedback>
              {form.getFieldDecorator('mobile', {
                rules: [{ required: true, message: '请输入联系人手机号！' }],
                initialValue: '',
              })(<Input maxLength="15" />)}
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem {...formItemLayout} label="联系人邮箱" hasFeedback>
              {form.getFieldDecorator('email', {
                rules: [
                  {
                    required: true,
                    message: '请输入联系人邮箱！',
                  },
                ],
                initialValue: '',
              })(<Input maxLength="30" />)}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <FormItem {...formItemLayout} label="附件(传待审核单证)" hasFeedback>
              <SingleDragger {...parentMethods}
                              disabled={false}/>
            </FormItem>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
};

export default Form.create<CreateFormProps>()(CreateForm);
